<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<!-- 
    v-for指令：
    1、用于展示数据的列表
    2、语法：v-for="(item,index) in XXX" :key="yyy"
    3、可遍历数组（最多）、对象、字符串、指定次数
 -->

<body>
    <div id="root">
        <h2>人员信息列表</h2>
        <!-- 遍历数组 -->
        <ul>
            <li v-for="(p,index) in  persons" :key="p.id">{{p.name}}--{{p.age}}</li>
        </ul>
        <!-- 遍历对象 -->
        <h2> 汽车信息列表</h2>
        <ul>
            <li v-for="(value,key) of car" :key="key">{{key}}--{{value}}</li>
        </ul>

        <!-- 遍历字符串 -->
        <h2> 遍历字符串</h2>
        <ul>
            <li v-for="(value,key) of str" :key="key">{{key}}--{{value}}</li>
        </ul>

        <!-- 遍历数字 -->
        <h2>遍历数字</h2>
        <ul>
            <li v-for="(number,index) of 5  " key="index">
                {{index}}--{{number}}
            </li>
        </ul>
    </div>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el: "#root ",
            data: {
                persons: [{
                    id: '001',
                    name: '张三',
                    age: 18
                }, {
                    id: '002',
                    name: '李四',
                    age: 19
                }, {
                    id: '003',
                    name: '刘宇',
                    age: 20
                }],
                car: {
                    name: '奔驰',
                    price: 10000,
                    color: 'blue'
                },
                str: 'abcd'

            }
        })
    </script>
</body>

</html>